<template>
  <div id="app">
    <el-container class="">
      <el-header class="">
        <!-- 标题组件 -->
        <el-button @click="go(`Home`)">
          back to home
        </el-button>
        <el-button @click="go(`Login`)">
          go Login
        </el-button>
        <el-button @click="go(`Register`)">
          go Register
        </el-button>
        <el-button @click="go(`LogCap`)">
          go login with captcha
        </el-button>
      </el-header>
      <el-main>
        <!-- 主体内容 -->
        <keep-alive :include="include">
          <!-- 需要缓存的视图组件 -->
          <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive" />
      </el-main>
    </el-container>
  </div>
</template>
<script>
import apps from '@/utils/inputCheck.js';
export default {
  name: 'App',
  data() {
    return {
      include: []
    };
  },
  computed: {},
  watch: {
    $route(to, from) {
      // 如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组
      if (to.meta.keepAlive) {
        this.include.indexOf(to.name) === -1 && this.include.push(to.name);
      }
      // 如果 要 form(离开) 的页面是 keepAlive缓存的，
      // 再根据 deepth 来判断是前进还是后退
      if (from.meta.keepAlive && to.meta.deepth <= from.meta.deepth) {
        var index = this.include.indexOf(from.name);
        index !== -1 && this.include.splice(index, 1);
      }
      this.$store.commit('updateKeepAliveInclude', this.include);
    }
  },
  created() {
    console.log(apps.checkFormErrorMsg(10));
  },
  beforeDestroy() {
    this.$store.commit('updateKeepAliveInclude', []);
  },
  methods: {}
};
</script>
<style lang="less">
@import './assets/css/reset.less';
.el-container {
  max-width: 1330px;
  margin: 0 auto;
}
</style>
